<template>
    <el-space wrap fill-ratio="" fill>
        <div v-for="item in commodities" :key="item.gid">
            <CommodityCard :commodity="item" style="margin-top: 5%;" />
        </div>
    </el-space>
    <el-empty v-show="isEmpty" description="这里空空如也～" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { queryAllCommodity } from '../assets/net/NetUtils';
import CommodityCard from './CommodityCard.vue';
import { CommodityModel } from '../assets/model/Commodity';

let isEmpty = ref(true)
const commodities = ref<Array<CommodityModel>>()
onMounted(() => {
    queryAllCommodity()
        .then((value) => {
            commodities.value = value.data;
            isEmpty.value = value.data.length === 0 ? true : false;
        })
})

</script>